﻿<%@ Page Title="" Language="C#" MasterPageFile="~/html/MyBlog.Master" AutoEventWireup="true" CodeBehind="Record.aspx.cs" Inherits="HelloLLLLL.Blog.html.Record" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title>文章归档</title>
     <!-- 本也特有css -->
    <link rel="stylesheet" href="../res/css/article-record.css">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
 <!-- 页面主体内容 -->
        <div class="layui-container">
            <blockquote class="layui-elem-quote sitemap shadow">
                <i class="layui-icon">&#xe715;</i>
                <span class="layui-breadcrumb" lay-separator=">">
                    <a href="/html/Index.aspx">首页</a>
                    <a><cite>文章归档</cite></a>
                </span>
            </blockquote>
            <div class="blog-nav-two shadow">
                <div class="layui-breadcrumb" lay-separator="|">
                    <a href="TimeLine.aspx"><span>滴答滴答</span></a>
                    <a href="Record.aspx" class="selected"><span>文章归档</span></a>
                   
                </div>
            </div>
            <div class="blog-panel">
                <div class="layui-row">
                    <!-- 左侧导航：此处时间跨度大的话，会出现溢出，请自行修复或等待下个版本 -->
                    <div class="layui-hide-xs layui-col-md2" style="margin:10px 0">
                        <ul class="article-record-title">
                            <%if (ListTime != null)
                                {for (int i = 0; i < ListTime.Count; i++) { %>
                            <li class="<%if (i == 0)
                                {%>selected<%} %>"><a href="#<%=ListTime[i][0]%>"><%=ListTime[i][1]%></a></li>
                            <%}} %>
                        </ul>
                    </div>
                    <!-- 左侧导航END -->
                    <!-- 右侧文章 -->
                    <div class="layui-col-xs12 layui-col-md10">
                        <div class="article-record-content">
                            <%if (Dic != null)
                                    {
                                        int i = 1;
                                        foreach (var key in Dic.Keys)
                                        {
                                            var list = Dic[key];
                                            var strArr = key.Split(new char[1] { ' ' }, StringSplitOptions.RemoveEmptyEntries);
                                            var tt = strArr[0] + strArr[1];
                                            var tt2 = strArr[0] + "年" + strArr[1] + "月";                                        %>
                            
                            <div class="article-record-item <%if (i == 1)
                                    {%>layui-show<%} %>">
                                <h4><a class="datenav" id="<%=tt%>"><%=tt2%></a></h4>
                                <ul>
                                    <% if (list != null)
                                        {
                                            for (int m = 0; m < list.Count; m++)
                                            {
                                                var time = list[m].ArtTime.ToString("MM月dd日");

                                                %>
                                    <li><span class="layui-badge layui-bg-black"
                                            style="margin-right:8px;"><%=time%></span><a href="Detial.aspx?Id=<%=list[m].Id%>">
                                                <%=list[m].Title%></a></li>
                                    <%}
                                             } %>
                                </ul>
                            </div>
                           
                            <%}
                                    i++;  } %>
                            
                          <%--  <div class="article-record-item ">
                                <h4><a class="datenav" id="20199">2019年9月</a></h4>
                                <ul>
                                    <li><span class="layui-badge layui-bg-black"
                                            style="margin-right:8px;">09月30日</span><a
                                            href="detail.html">博客升级到.NET Core 3.0的变化和问题</a></li>
                                    <li><span class="layui-badge layui-bg-black"
                                            style="margin-right:8px;">09月27日</span><a href="detail.html">EF
                                            Core进阶之加载关联数据</a></li>
                                    <li><span class="layui-badge layui-bg-black"
                                            style="margin-right:8px;">09月24日</span><a href="detail.html">.NET
                                            Core 3.0正式版发布</a></li>
                                    <li><span class="layui-badge layui-bg-black"
                                            style="margin-right:8px;">09月17日</span><a
                                            href="detail.html">JS动画效果之妙用Animate.css</a></li>
                                </ul>
                            </div>
                            <div class="article-record-item ">
                                <h4><a class="datenav" id="20195">2019年5月</a></h4>
                                <ul>
                                    <li><span class="layui-badge layui-bg-black"
                                            style="margin-right:8px;">05月01日</span><a
                                            href="detail.html">Xamarin.Forms移动开发系列5 ：XAML标记扩展</a></li>
                                </ul>
                            </div>
                            <div class="article-record-item ">
                                <h4><a class="datenav" id="20194">2019年4月</a></h4>
                                <ul>
                                    <li><span class="layui-badge layui-bg-black"
                                            style="margin-right:8px;">04月22日</span><a
                                            href="detail.html">Xamarin.Forms移动开发系列4 ：XAML基础</a></li>
                                    <li><span class="layui-badge layui-bg-black"
                                            style="margin-right:8px;">04月21日</span><a
                                            href="detail.html">Xamarin.Forms移动开发系列 ：目录</a></li>
                                    <li><span class="layui-badge layui-bg-black"
                                            style="margin-right:8px;">04月20日</span><a
                                            href="detail.html">Xamarin.Forms移动开发系列3：项目剖析</a></li>
                                    <li><span class="layui-badge layui-bg-black"
                                            style="margin-right:8px;">04月20日</span><a
                                            href="detail.html">Xamarin.Forms移动开发系列2：创建和调试</a></li>
                                    <li><span class="layui-badge layui-bg-black"
                                            style="margin-right:8px;">04月19日</span><a
                                            href="detail.html">Xamarin.Forms移动开发系列1：介绍和安装</a></li>
                                    <li><span class="layui-badge layui-bg-black"
                                            style="margin-right:8px;">04月10日</span><a
                                            href="detail.html">使用ASP.NET Core SignalR搭建聊天室（本站聊天室）</a></li>
                                </ul>
                            </div>
                            <div class="article-record-item ">
                                <h4><a class="datenav" id="201810">2018年10月</a></h4>
                                <ul>
                                    <li><span class="layui-badge layui-bg-black"
                                            style="margin-right:8px;">10月29日</span><a
                                            href="detail.html">小程序黑科技之获取手机号码、通讯地址、地理位置</a></li>
                                </ul>
                            </div>
                            <div class="article-record-item ">
                                <h4><a class="datenav" id="20185">2018年5月</a></h4>
                                <ul>
                                    <li><span class="layui-badge layui-bg-black"
                                            style="margin-right:8px;">05月09日</span><a
                                            href="detail.html">Blocksit+Layui实现响应式瀑布流加载</a></li>
                                </ul>
                            </div>
                            <div class="article-record-item ">
                                <h4><a class="datenav" id="20184">2018年4月</a></h4>
                                <ul>
                                    <li><span class="layui-badge layui-bg-black"
                                            style="margin-right:8px;">04月10日</span><a
                                            href="detail.html">纯CSS实现文章左上角Flag标签</a></li>
                                    <li><span class="layui-badge layui-bg-black"
                                            style="margin-right:8px;">04月09日</span><a href="detail.html">新功能上线 -
                                            博文打赏（网站分享组件推荐）</a></li>
                                    <li><span class="layui-badge layui-bg-black"
                                            style="margin-right:8px;">04月07日</span><a href="detail.html">新功能上线 -
                                            博文配乐（网页音乐播放器推荐）</a></li>
                                    <li><span class="layui-badge layui-bg-black"
                                            style="margin-right:8px;">04月03日</span><a href="detail.html">邮我组件 -
                                            用户点击即可发送邮件</a></li>
                                </ul>
                            </div>
                            <div class="article-record-item ">
                                <h4><a class="datenav" id="20183">2018年3月</a></h4>
                                <ul>
                                    <li><span class="layui-badge layui-bg-black"
                                            style="margin-right:8px;">03月24日</span><a
                                            href="detail.html">后台可以管理文章了，接下来开始做博客前台。</a></li>
                                    <li><span class="layui-badge layui-bg-black"
                                            style="margin-right:8px;">03月21日</span><a href="detail.html">ASP.NET
                                            Core第三方认证之QQ登录</a></li>
                                    <li><span class="layui-badge layui-bg-black"
                                            style="margin-right:8px;">03月18日</span><a
                                            href="detail.html">WangEditor集成到后台，发个文章压压惊。</a></li>
                                </ul>
                            </div>--%>
                        </div>
                    </div>
                    <!-- 右侧文章END -->
                </div>
            </div>
        </div>
      <!-- 本页特有js -->
    <script>
        layui.use('jquery', function () {
            var $ = layui.jquery;
            var i, t;
            $(function () {
                $('.article-record-title li').on('click', function () {
                    var self = this;
                    $(self).addClass('selected').siblings().removeClass('selected');
                    clearTimeout(t);
                    clearInterval(i);
                    $('.datenav').removeClass('highlight');
                    highlight(self);
                    i = setInterval(function () {
                        highlight(self);
                    }, 600);
                    t = setTimeout(function () {
                        clearInterval(i);
                    }, 1200);

                    $("html, body").animate({
                        scrollTop: $($(self).children().attr("href")).offset().top + -
                            100 + "px"
                    }, {
                        duration: 400,
                        easing: "swing"
                    });
                });

                function highlight(elem) {
                    var target = $(elem).children().text().replace('年', '').replace('月', '');
                    $('#' + target).addClass('highlight');
                    setTimeout(function () {
                        $('#' + target).removeClass('highlight');
                    }, 300);
                }
            });
        });
    </script>
</asp:Content>
